<template>
  <div class="app-container">
    <div class="header-bar">
      <el-button
          type="primary"
          icon="ArrowLeft"
          @click="handleBack"
          class="back-btn"
      >
        返回
      </el-button>
      <h2 class="page-title">健康记录管理</h2>
      <el-button
          type="info"
          icon="View"
          @click="showThresholdDialog"
          class="threshold-btn"
      >
        查看阈值
      </el-button>
    </div>

    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <!-- 新增记录按钮 -->
      <el-form-item class="action-button">
        <el-button
            type="primary"
            icon="Plus"
            @click="handleAdd"
            class="add-btn"
        >
          新增记录
        </el-button>
      </el-form-item>

      <!-- 记录日期查询 -->
      <el-form-item label="记录日期" class="date-picker">
        <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 320px;"
        />
      </el-form-item>
      <el-form-item class="query-actions">
        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
        v-loading="loading"
        :data="recordsList"
        :row-class-name="handleRowClass"
        stripe
    >
      <el-table-column label="记录时间" width="180">
        <template #default="scope">
          {{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="userName" align="center"/>
      <el-table-column label="性别" align="center">
        <template #default="scope">
          {{ scope.row.gender === '1' ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column label="身高(cm)" prop="height" align="center"/>
      <el-table-column label="体重(kg)" prop="weight" align="center"/>
      <el-table-column label="BMI" align="center">
        <template #default="scope">
          <el-tooltip :content="getBmiStatus(calcBMI(scope.row.height, scope.row.weight))" placement="top">
            <span :style="{ color: getBMIDisplay(scope.row).color }">
              {{ getBMIDisplay(scope.row).value }}
            </span>
          </el-tooltip>
          <el-icon
              v-if="getBMIDisplay(scope.row).level > 0"
              :color="getBMIDisplay(scope.row).color"
              style="margin-left: 5px;"
          >
            <Warning />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="血压(mmHg)" align="center">
        <template #default="scope">
          <el-tooltip :content="getBloodPressureStatus(scope.row.systolic, scope.row.diastolic)" placement="top">
            <span :style="{ color: getBloodPressureDisplay(scope.row).color }">
              {{ getBloodPressureDisplay(scope.row).value }}
            </span>
          </el-tooltip>
          <el-icon
              v-if="getBloodPressureDisplay(scope.row).level > 0"
              :color="getBloodPressureDisplay(scope.row).color"
              style="margin-left: 5px;"
          >
            <Warning />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="血糖" prop="bloodSugar" align="center">
        <template #default="scope">
          <el-tooltip :content="getBloodSugarStatus(scope.row.bloodSugar)" placement="top">
            <span :style="{ color: getBloodSugarDisplay(scope.row).color }">
              {{ getBloodSugarDisplay(scope.row).value }}
            </span>
          </el-tooltip>
          <el-icon
              v-if="getBloodSugarDisplay(scope.row).level > 0"
              :color="getBloodSugarDisplay(scope.row).color"
              style="margin-left: 5px;"
          >
            <Warning />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="心率" prop="heartRate" align="center">
        <template #default="scope">
          <span :class="{
            'warning-text': scope.row.heartRate < thresholds.heartRate.min ||
                           scope.row.heartRate > thresholds.heartRate.max
          }">
            {{ scope.row.heartRate }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 表单弹窗 -->
    <el-dialog :title="title" v-model="open" width="600px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio v-for="option in genderOptions" :key="option.value" :label="option.value">
                  {{ option.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                label="身高(cm)"
                prop="height"
                :rules="[
                { required: true, message: '身高不能为空' },
                { validator: validateHeight, trigger: 'blur' }
              ]"
            >
              <el-input-number
                  v-model="form.height"
                  :min="50"
                  :max="250"
                  controls-position="right"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
                label="体重(kg)"
                prop="weight"
                :rules="[
                { required: true, message: '体重不能为空' },
                { validator: validateWeight, trigger: 'blur' }
              ]"
            >
              <el-input-number
                  v-model="form.weight"
                  :min="20"
                  :max="300"
                  controls-position="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                label="高压(mmHg)"
                prop="systolic"
                :rules="[
                { required: true, message: '收缩压不能为空' },
                { validator: validateSystolic, trigger: 'blur' }
              ]"
            >
              <el-input-number
                  v-model="form.systolic"
                  :min="50"
                  :max="250"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
                label="低压(mmHg)"
                prop="diastolic"
                :rules="[
                { required: true, message: '舒张压不能为空' },
                { validator: validateDiastolic, trigger: 'blur' }
              ]"
            >
              <el-input-number
                  v-model="form.diastolic"
                  :min="30"
                  :max="200"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                label="心率(bpm)"
                prop="heartRate"
                :rules="[
                { required: true, message: '心率不能为空' },
                { validator: validateHeartRate, trigger: 'blur' }
              ]"
            >
              <el-input-number
                  v-model="form.heartRate"
                  :min="30"
                  :max="200"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
                label="血糖(mmol/L)"
                prop="bloodSugar"
                :rules="[
                { required: true, message: '血糖不能为空' },
                { validator: validateBloodSugar, trigger: 'blur' }
              ]"
            >
              <el-input-number
                  v-model="form.bloodSugar"
                  :min="2"
                  :max="30"
                  :step="0.1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录时间" prop="recordTime">
              <el-date-picker
                  v-model="form.recordTime"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择记录时间"
                  :disabled-date="disabledDate"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 阈值设置对话框 -->
    <el-dialog title="健康指标参考范围" v-model="thresholdVisible" width="500px">
      <el-form label-width="120px">
        <el-form-item label="收缩压（高压）健康范围">
          <div class="range-display">
            <span>90-140 mmHg</span>
          </div>
        </el-form-item>
        <el-form-item label="舒张压（高压）健康范围">
          <div class="range-display">
            <span>60-90 mmHg</span>
          </div>
        </el-form-item>
        <el-form-item label="血糖目标范围">
          <div class="range-display">
            <span>3.9-7.8 mmol/L</span>
          </div>
        </el-form-item>
        <el-form-item label="BMI健康范围">
          <div class="range-display">
            <span>18.5-23.9</span>
          </div>
        </el-form-item>
        <el-form-item label="心率正常范围（非运动）">
          <div class="range-display">
            <span>60-100 bpm</span>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="thresholdVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted,onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { Warning } from '@element-plus/icons-vue'
import { listRecords, addRecords, updateRecords, delRecords, getRecords } from '@/api/healthSys/records'
import * as echarts from 'echarts';
import { listDiet } from "@/api/healthSys/diet";
import { listSport } from "@/api/healthSys/sport";
const router = useRouter()
const { proxy } = getCurrentInstance()

// 响应式数据
const loading = ref(false)
const open = ref(false)
const thresholdVisible = ref(false)
const title = ref('')
const recordsList = ref([])
const total = ref(0)
const currentUserId = ref(null)

// 阈值配置
const thresholds = reactive({
  systolic: { 
    min: 90, 
    max: 140,
    level1: { min: 140, max: 159 },
    level2: { min: 160, max: 179 },
    level3: { min: 180 }
  },
  diastolic: { 
    min: 60, 
    max: 90,
    level1: { min: 90, max: 99 },
    level2: { min: 100, max: 109 },
    level3: { min: 110 }
  },
  bloodSugar: { 
    min: 3.9, 
    max: 7.8,
    level1: { min: 7.8, max: 11 },
    level2: { min: 11 }
  },
  bmi: { 
    min: 18.5, 
    max: 23.9,
    level3: { min: 24.9 }
  },
  heartRate: { min: 60, max: 100 }
})

const tempThresholds = reactive({
  systolic: 140,
  diastolic: 90,
  bloodSugar: 7.8,
  bmi: 24.9,
  heartRate: { min: 60, max: 100 }
})

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 12,
  userId: null,
  dateRange: [],
  orderByColumn: 'record_time',
  isAsc: 'desc'
})

// 表单数据
const form = reactive({
  healthId: null,
  userId: null,
  gender: '1', // 默认男性
  height: null,
  weight: null,
  systolic: null,
  diastolic: null,
  heartRate: null,
  bloodSugar: null,
  recordTime: null
})

// 性别选项
const genderOptions = [
  { label: '男', value: '1' },
  { label: '女', value: '0' }
]

// 验证规则
const rules = {
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  recordTime: [{ required: true, message: '记录时间不能为空', trigger: 'change' }]
}

// 方法定义
const handleBack = () => {
  router.go(-1)
}

const getList = async () => {
  try {
    loading.value = true
    const params = {
      ...queryParams,
      beginTime: queryParams.dateRange?.[0],
      endTime: queryParams.dateRange?.[1]
    }
    delete params.dateRange

    const res = await listRecords(params)
    recordsList.value = res.rows
    total.value = res.total
  } catch (error) {
    proxy.$modal.msgError('数据加载失败')
  } finally {
    loading.value = false
  }
}

const calcBMI = (h, w) => {
  if (!h || !w) return '-'
  return (w / ((h/100) ** 2)).toFixed(1)
}

// 获取血压等级
const getBloodPressureLevel = (systolic, diastolic) => {
  if (systolic >= thresholds.systolic.level3.min || diastolic >= thresholds.diastolic.level3.min) {
    return { level: 3, color: '#f56c6c' } // 红色
  }
  if (systolic >= thresholds.systolic.level2.min || diastolic >= thresholds.diastolic.level2.min) {
    return { level: 2, color: '#f08011' } // 橙色
  }
  if (systolic >= thresholds.systolic.level1.min || diastolic >= thresholds.diastolic.level1.min) {
    return { level: 1, color: '#e2bf24' } // 黄色
  }
  return { level: 0, color: '#67c23a' } // 绿色
}

// 获取血糖等级
const getBloodSugarLevel = (value) => {
  if (value >= thresholds.bloodSugar.level2.min) {
    return { level: 2, color: '#f56c6c' } // 红色
  }
  if (value >= thresholds.bloodSugar.level1.min) {
    return { level: 1, color: '#e2bf24' } // 黄色
  }
  return { level: 0, color: '#67c23a' } // 绿色
}

// 获取BMI等级
const getBMILevel = (value) => {
  if (value >= thresholds.bmi.level3.min) {
    return { level: 3, color: '#f56c6c' } // 红色
  }
  if (value < thresholds.bmi.min || value > thresholds.bmi.max) {
    return { level: 1, color: '#e6a23c' } // 黄色
  }
  return { level: 0, color: '#67c23a' } // 绿色
}
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
// 修改表格中的显示逻辑
const isBloodPressureHigh = (row) => {
  return row.systolic > thresholds.systolic.max || 
         row.systolic < thresholds.systolic.min ||
         row.diastolic > thresholds.diastolic.max || 
         row.diastolic < thresholds.diastolic.min
}

const getBloodPressureColor = (row) => {
  const level = getBloodPressureLevel(row.systolic, row.diastolic)
  return level.color
}

const handleRowClass = ({ row }) => {
  const classes = []
  const bpLevel = getBloodPressureLevel(row.systolic, row.diastolic)
  const bsLevel = getBloodSugarLevel(row.bloodSugar)
  const bmiLevel = getBMILevel(calcBMI(row.height, row.weight))
  
  if (bpLevel.level > 0) classes.push(`warning-row-level-${bpLevel.level}`)
  if (bsLevel.level > 0) classes.push(`warning-row-level-${bsLevel.level}`)
  if (bmiLevel.level > 0) classes.push(`warning-row-level-${bmiLevel.level}`)
  if (row.heartRate < thresholds.heartRate.min || row.heartRate > thresholds.heartRate.max) {
    classes.push('warning-row-level-1')
  }
  return classes.join(' ')
}

// 修改表格列的显示
const getBloodPressureDisplay = (row) => {
  const level = getBloodPressureLevel(row.systolic, row.diastolic)
  return {
    value: `${row.systolic}/${row.diastolic}`,
    color: level.color,
    level: level.level
  }
}

const getBloodSugarDisplay = (row) => {
  const level = getBloodSugarLevel(row.bloodSugar)
  return {
    value: row.bloodSugar,
    color: level.color,
    level: level.level
  }
}

const getBMIDisplay = (row) => {
  const bmi = calcBMI(row.height, row.weight)
  const level = getBMILevel(bmi)
  return {
    value: bmi,
    color: level.color,
    level: level.level
  }
}

const showThresholdDialog = () => {
  Object.assign(tempThresholds, thresholds)
  tempThresholds.heartRate = { ...thresholds.heartRate }
  thresholdVisible.value = true
}

const submitThreshold = () => {
  Object.assign(thresholds, tempThresholds)
  thresholdVisible.value = false
  proxy.$modal.msgSuccess('阈值设置已更新')
}

// 表单验证方法
const validateHeight = (rule, value, callback) => {
  if (value < 50 || value > 250) {
    callback(new Error('身高应在50-250cm之间'))
  } else {
    callback()
  }
}

const validateWeight = (rule, value, callback) => {
  if (value < 20 || value > 300) {
    callback(new Error('体重应在20-300kg之间'))
  } else {
    callback()
  }
}

const validateSystolic = (rule, value, callback) => {
  if (value < thresholds.systolic.min || value > thresholds.systolic.max) {
    proxy.$modal.confirm(`收缩压值超出健康范围（${thresholds.systolic.min}-${thresholds.systolic.max}mmHg），确认提交吗？`)
        .then(() => callback())
        .catch(() => callback(new Error('已取消提交')))
  } else {
    callback()
  }
}

const validateDiastolic = (rule, value, callback) => {
  if (value < thresholds.diastolic.min || value > thresholds.diastolic.max) {
    proxy.$modal.confirm(`舒张压值超出健康范围（${thresholds.diastolic.min}-${thresholds.diastolic.max}mmHg），确认提交吗？`)
        .then(() => callback())
        .catch(() => callback(new Error('已取消提交')))
  } else {
    callback()
  }
}

const validateHeartRate = (rule, value, callback) => {
  if (value < thresholds.heartRate.min || value > thresholds.heartRate.max) {
    proxy.$modal.confirm(`心率超出正常范围（${thresholds.heartRate.min}-${thresholds.heartRate.max}bpm），确认提交吗？`)
        .then(() => callback())
        .catch(() => callback(new Error('已取消提交')))
  } else {
    callback()
  }
}

const validateBloodSugar = (rule, value, callback) => {
  if (value < thresholds.bloodSugar.min || value > thresholds.bloodSugar.max) {
    proxy.$modal.confirm(`血糖值超出目标范围（${thresholds.bloodSugar.min}-${thresholds.bloodSugar.max}mmol/L），确认提交吗？`)
        .then(() => callback())
        .catch(() => callback(new Error('已取消提交')))
  } else {
    callback()
  }
}

// 查询处理
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  proxy.resetForm('queryRef')
  queryParams.dateRange = []
  handleQuery()
}

// 新增记录
const handleAdd = () => {
  resetForm()
  open.value = true
  title.value = '新增健康记录'
}

// 修改记录
const handleUpdate = async (row) => {
  try {
    resetForm()
    const res = await getRecords(row.healthId)
    Object.assign(form, res.data)
    open.value = true
    title.value = '修改健康记录'
  } catch (error) {
    proxy.$modal.msgError('数据加载失败')
  }
}

// 提交表单
const submitForm = async () => {
  try {
    await proxy.$refs.formRef.validate()

    // 确保携带用户ID
    const submitData = { ...form }

    if (form.healthId) {
      await updateRecords(submitData)
      proxy.$modal.msgSuccess('修改成功')
    } else {
      await addRecords(submitData)
      proxy.$modal.msgSuccess('新增成功')
    }

    open.value = false
    getList()
  } catch (error) {
    console.error('操作失败:', error)
  }
}

// 删除处理
const handleDelete = async (row) => {
  try {
    await proxy.$modal.confirm(`确认删除 ${proxy.parseTime(row.recordTime)} 的记录？`)
    await delRecords(row.healthId)
    getList()
    proxy.$modal.msgSuccess('删除成功')
  } catch (error) {
    // 取消删除不处理
  }
}

// 重置表单
const resetForm = () => {
  form.healthId = null
  form.gender = '1' // 重置为默认值
  form.height = null
  form.weight = null
  form.systolic = null
  form.diastolic = null
  form.heartRate = null
  form.bloodSugar = null
  form.recordTime = null
  form.userId = currentUserId.value
}

// 取消操作
const cancel = () => {
  open.value = false
  resetForm()
}


// BMI判定
const getBmiStatus = (bmi) => {
  if (bmi < 18.5) return '偏瘦呀';
  if (bmi < 24) return '好身材保持住！';
  if (bmi < 28) return '超重啦';
  return '该减肥啦！！！';
};

// 血压判定
const getBloodPressureStatus = (systolic, diastolic) => {
  let sys = '';
  let dia = '';
  if (systolic < 90) sys = '收缩压偏低';
  else if (systolic <= 140) sys = '收缩压正常';
  else sys = '收缩压偏高';

  if (diastolic < 60) dia = '舒张压偏低';
  else if (diastolic <= 90) dia = '舒张压正常';
  else dia = '舒张压偏高';

  return `${sys}，${dia}`;
};

// 血糖判定（以空腹血糖为例）
const getBloodSugarStatus = (sugar) => {
  if (sugar < 3.9) return '血糖偏低';
  if (sugar <= 7.8) return '血糖正常';
  return '血糖偏高';
};

onMounted(() => {
  getList()
})
</script>

<style scoped>
.app-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.header-bar:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.threshold-btn {
  margin-left: auto;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.threshold-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 154, 158, 0.3);
}

.el-table {
  margin-top: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  line-height: 2.2rem;
}

.el-table:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.el-table :deep(th) {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  font-weight: 600;
  color: #2c3e50;
  padding: 16px 8px;
}

.el-table :deep(td) {
  padding: 16px 8px;
  transition: all 0.3s ease;
}

.el-table :deep(tr:hover td) {
  background-color: #f8f9fa;
}

.el-table :deep(.warning-row) {
  background-color: #fff5f5;
}

.warning-text {
  color: #ff6b6b;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(255, 107, 107, 0.1);
}

.heart-rate-range {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f9fa;
  padding: 8px 16px;
  border-radius: 8px;
}

.range-separator {
  margin: 0 8px;
  color: #909399;
  font-weight: 500;
}

.back-btn {
  margin-right: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.back-btn:hover {
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.el-form {
  margin: 24px 0;
  padding: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.el-form-item {
  margin-bottom: 24px;
}

.el-button--primary {
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #ca62bc 100%);
  border: none;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.el-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.el-dialog__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid #ebeef5;
  padding: 24px 32px;
}

.el-dialog__body {
  padding: 32px;
}

.el-input-number {
  width: 100%;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-input-number:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.el-date-editor {
  width: 100%;
  border-radius: 8px;
}

.pagination-container {
  margin-top: 32px;
  text-align: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.range-display {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  color: #2c3e50;
  font-weight: 500;
}

.range-display span {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 768px) {
  .app-container {
    overflow-x: auto;
  }
  .header-bar {
    padding: 16px 20px;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .back-btn {
    margin: 0 0 16px 0;
  }

  .threshold-btn {
    margin: 16px 0 0 0;
  }

  .el-form {
    padding: 20px;
  }

  .el-date-picker {
    width: 100% !important;
  }

  .el-form-item__content {
    flex-wrap: wrap;
  }

  .el-button {
    margin-top: 8px;
    width: 100%;
  }
  .el-table {
    font-size: 14px;
    padding: 8px 12px;
  }
  .el-table__cell {
    min-width: 80px;
  }
  .el-icon {
    font-size: 14px;
  }
}

.warning-row-level-1 {
  background-color: #fdf6ec;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.warning-row-level-2 {
  background-color: #fef7f0;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.warning-row-level-3 {
  background-color: #fefbf0;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-table :deep(.warning-row-level-1 td) {
  background-color: #fdf6ec !important;
}

.el-table :deep(.warning-row-level-2 td) {
  background-color: #fef0f0 !important;
}

.el-table :deep(.warning-row-level-3 td) {
  background-color: #fef0f0 !important;
}
</style>
